/*
 * @Descripttion : 气泡确认框
 * @Author       : QianFox Team
 * @Date         : 2022-04-27 14:17:05
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2022-08-22 15:13:06
 */

import { _typeOf } from './common/utils';
import { Tip } from './tip';

function Confirmtip() {
    Tip.call(this);

    this.CLASS_NAME = 'foxui-confirmtip';
    this.HANDLE_CANCEL = `#${this.foxId} .${this.CLASS_NAME}__footer .cancel`;
    this.HANDLE_CONFIRM = `#${this.foxId} .${this.CLASS_NAME}__footer .confirm`;

    this.TYPELIST = ['primary', 'warning', 'danger', 'success', 'info'];
    this.SIZELIST = ['default', 'medium', 'small', 'mini'];
    this.ALIGNLIST = ['left', 'center', 'right'];

    this.el = null;
    this.trigger = null;
    this.title = '';

    this.cancelText = '';
    this.confirmText = '';

    this.buttonType = 'primary';
    this.buttonSize = 'mini';
    this.buttonAlign = 'right';
    this.longButton = false;

    this.confirm = null;
    this.cancel = null;

    this.timer = null;
}

Object.setPrototypeOf(Confirmtip.prototype, Tip.prototype);

Confirmtip.prototype._init = function ({
    el,
    trigger,
    title,
    content,
    cancelText,
    confirmText,
    buttonType,
    buttonSize,
    buttonAlign,
    longButton,
    className,
    width,
    placement,
    isRemove,
    confirm,
    cancel,
}) {
    // 保存数据及配置
    this.el = el;
    this.trigger = trigger;
    this.title = title || '';
    this.content = content || '';
    this.cancelText = cancelText || '';
    this.confirmText = confirmText || '';
    this.buttonType = this.TYPELIST.indexOf(buttonType) !== -1 ? buttonType : 'primary';
    this.buttonSize = this.SIZELIST.indexOf(buttonSize) !== -1 ? buttonSize : 'mini';
    this.buttonAlign = this.ALIGNLIST.indexOf(buttonAlign) !== -1 ? buttonAlign : 'right';
    _typeOf(longButton) === 'boolean' && (this.longButton = longButton);
    this.className = className || '';
    this.width = width || 'auto';
    _typeOf(placement) === 'array' && placement.length > 0 && (this.placement = placement);
    isRemove === true && (this.isRemove = isRemove);
    this.confirm = confirm || null;
    this.cancel = cancel || null;

    // 初始化绑定事件
    this._bindCancel();
    this._bindConfirm();
    this._clearByClickBlank();
    this._bindSetPosition();
    this._bindTriggerEvent();
};

Confirmtip.prototype._appendHtml = function () {
    // 追加 confirmtip 内容
    $('body').append(this._html());
};

Confirmtip.prototype._headerHtml = function () {
    let html = '';
    if (this.title) {
        html = [`<div class="${this.CLASS_NAME}__header">`, `${this.title ? this.title : ''}`, '</div>'].join('');
    }
    return html;
};

Confirmtip.prototype._footerHtml = function () {
    let html = '',
        cancelType = this.buttonType === 'primary' ? 'primary' : 'info';
    if (this.cancelText || this.confirmText) {
        html = [
            `<div class="${this.CLASS_NAME}__footer" style="text-align:${this.buttonAlign}">`,
            `${
                this.cancelText ? '<button class="foxui-text-' + cancelType + ' foxui-size-' + this.buttonSize + (this.longButton ? ' is-long' : '') + ' cancel">' + this.cancelText + '</button>' : ''
            }`,
            `${
                this.confirmText
                    ? '<button class="foxui-solid-' + this.buttonType + ' foxui-size-' + this.buttonSize + (this.longButton ? ' is-long' : '') + ' confirm">' + this.confirmText + '</button>'
                    : ''
            }`,
            '</div>',
        ].join('');
    }
    return html;
};

Confirmtip.prototype._bindTriggerEvent = function () {
    let that = this;

    if (this.trigger === 'hover') {
        $(document).on('mouseover', this.el, function () {
            // 清除定时器
            clearTimeout(that.timer);
            that.timer = null;

            if ($(`#${that.foxId}`).length < 1) {
                that._appendHtml();
            }
            that._show();
        });

        $(document).on('mouseout', this.el, function () {
            that.timer = setTimeout(() => {
                that._close();
            }, 250);
        });

        $(document).on('mouseenter', `#${this.foxId}`, function () {
            // 清除定时器
            clearTimeout(that.timer);
            that.timer = null;
        });

        $(document).on('mouseleave', `#${this.foxId}`, function () {
            that.timer = setTimeout(() => {
                that._close();
            }, 250);
        });
    } else {
        $(document).on('click', this.el, function (event) {
            event.stopPropagation();

            if ($(`#${that.foxId}`).length < 1) {
                that._appendHtml();
            }

            that._toggle();
        });
    }
};

/**
 * @description: 绑定点击空白处关闭弹出框
 * @param {*}
 * @return {*}
 * @Date: 2022-05-06 11:35:51
 */
Confirmtip.prototype._clearByClickBlank = function () {
    let that = this;

    $(document).on('click', `#${this.foxId}`, function (event) {
        event.stopPropagation();
    });

    $(document).click(function () {
        that._close();
    });
};

/**
 * @description: 实例初始化组件
 * @param {*} el                          触发按钮节点
 * @param {*} trigger                     触发方式：1、click(默认)； 2、hover;
 * @param {*} title                       标题
 * @param {*} content                     主体内容
 * @param {*} cancelText                  取消按钮文字
 * @param {*} confirmText                 确定按钮文字
 * @param {*} buttonType                  按钮类形(botton按钮)
 * @param {*} buttonSize                  按钮尺寸
 * @param {*} buttonAlign                 按钮水平对齐方式(left, center, right)
 * @param {*} longButton                  是否是长按钮
 * @param {*} className                   弹框最外层类名
 * @param {*} width                       弹框宽度
 * @param {*} placement                   三角形位置
 * @param {*} isRemove                    是否需要删除节点
 * @param {*} confirm                     点击确定回调函数
 * @param {*} cancel                      点击取消回调函数
 * @return {*}
 * @Date: 2022-05-06 10:37:43
 */
function confirmtip({ el, trigger, title, content, cancelText, confirmText, buttonType, buttonSize, buttonAlign, longButton, className, width, placement, isRemove, confirm, cancel }) {
    $(el).each(function () {
        const hasFoxid = $(this).attr('data-foxid') ? true : false;

        if (!hasFoxid) {
            let confirmtip = new Confirmtip(),
                foxid = confirmtip.foxId;

            $(this).attr('data-foxid', foxid);
            confirmtip._init({
                el: `${el}[data-foxid=${foxid}]`,
                trigger,
                title,
                content,
                cancelText,
                confirmText,
                buttonType,
                buttonSize,
                buttonAlign,
                longButton,
                className,
                width,
                placement,
                isRemove,
                confirm,
                cancel,
            });
            return confirmtip;
        }
    });
}

export { Confirmtip, confirmtip };
